Google Charts একটি শক্তিশালী ভিজ্যুয়ালাইজেশন টুল যা ডেটা প্রদর্শন করতে ব্যবহৃত হয়। কখনও কখনও, আপনি আপনার তৈরি করা চার্টগুলো PNG, SVG বা PDF আকারে Export করতে চান, যাতে সেগুলো ডাউনলোড করা বা অন্যান্য মিডিয়াতে ব্যবহার করা যায়। Google Charts এ সহজেই চার্টের ছবি এক্সপোর্ট করার জন্য একটি বিশেষ ফিচার রয়েছে, যার মাধ্যমে আপনি আপনার চার্টের ছবি বিভিন্ন ফরম্যাটে সংরক্ষণ করতে পারেন।
১. Chart Image Export (PNG, SVG, PDF)
Google Charts এ chart image export করার জন্য getImageURI() ফাংশন ব্যবহার করা হয়। এই ফাংশনটি আপনার চার্টকে একটি নির্দিষ্ট ইমেজ ফরম্যাটে রেন্ডার করে এবং তার পর আপনি সেই ছবি ডাউনলোড করতে পারেন।
১.১ Chart Export in PNG Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Export Chart to PNG, SVG, PDF</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['City', 'Population'],
['New York', 8175000],
['Los Angeles', 3792000],
['Chicago', 2695000],
['Houston', 2121000],
['Phoenix', 1445000]
]);
var options = {
title: 'Population of Major Cities',
hAxis: {title: 'Population', minValue: 0},
vAxis: {title: 'City'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
// Export to PNG
document.getElementById('download_png').addEventListener('click', function() {
var imageUri = chart.getImageURI(); // Get the chart as PNG
var link = document.createElement('a');
link.href = imageUri;
link.download = 'chart.png'; // Set the download file name
link.click(); // Trigger the download
});
}
</script>
</head>
<body>
<h2>Google Chart Export to PNG Example</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<button id="download_png">Download PNG</button>
</body>
</html>
কোড ব্যাখ্যা:
- getImageURI():
chart.getImageURI()ফাংশনটি ব্যবহার করে আপনি চার্টটি PNG ফরম্যাটে রেন্ডার করতে পারেন। এটি একটি ডেটা URI ফিরিয়ে দেয়, যা ইমেজ ফাইল হিসেবে ডাউনলোড করা যায়। - Download PNG: একটি Download বাটন তৈরি করা হয়েছে, যার মাধ্যমে ব্যবহারকারী চার্টের ছবি PNG ফরম্যাটে ডাউনলোড করতে পারবেন।
২. Chart Export to SVG
SVG (Scalable Vector Graphics) ফরম্যাট একটি ভেক্টর ইমেজ ফরম্যাট, যা হার্শ্বিকভাবে স্কেল করা যায় এবং high-quality print এবং resizing এর জন্য ব্যবহার করা হয়।
উদাহরণ: Chart Export to SVG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Export Chart to SVG</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['City', 'Population'],
['New York', 8175000],
['Los Angeles', 3792000],
['Chicago', 2695000],
['Houston', 2121000],
['Phoenix', 1445000]
]);
var options = {
title: 'Population of Major Cities',
hAxis: {title: 'Population', minValue: 0},
vAxis: {title: 'City'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
// Export to SVG
document.getElementById('download_svg').addEventListener('click', function() {
var svgUri = chart.getImageURI().replace('image/png', 'image/svg+xml');
var link = document.createElement('a');
link.href = svgUri;
link.download = 'chart.svg'; // Set the download file name
link.click(); // Trigger the download
});
}
</script>
</head>
<body>
<h2>Google Chart Export to SVG Example</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<button id="download_svg">Download SVG</button>
</body>
</html>
কোড ব্যাখ্যা:
- SVG Export: এখানে getImageURI() এর আউটপুটকে 'image/svg+xml' ফরম্যাটে রূপান্তরিত করা হয়েছে। এটি SVG ফরম্যাটে চিত্র রেন্ডার করে, যা আরও স্পষ্ট এবং স্কেলযোগ্য হয়।
৩. Chart Export to PDF
PDF এ চার্ট এক্সপোর্ট করার জন্য Google Charts সরাসরি কোনো ফাংশন প্রদান না করলেও, আপনি HTML2Canvas বা jsPDF এর মতো বাইরের লাইব্রেরি ব্যবহার করে এটি করতে পারেন।
উদাহরণ: Chart Export to PDF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Export Chart to PDF</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['City', 'Population'],
['New York', 8175000],
['Los Angeles', 3792000],
['Chicago', 2695000],
['Houston', 2121000],
['Phoenix', 1445000]
]);
var options = {
title: 'Population of Major Cities',
hAxis: {title: 'Population', minValue: 0},
vAxis: {title: 'City'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
// Export to PDF
document.getElementById('download_pdf').addEventListener('click', function() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
doc.html(document.getElementById('chart_div'), {
callback: function (doc) {
doc.save('chart.pdf');
}
});
});
}
</script>
</head>
<body>
<h2>Google Chart Export to PDF Example</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<button id="download_pdf">Download PDF</button>
</body>
</html>
কোড ব্যাখ্যা:
- jsPDF Library: jsPDF লাইব্রেরি ব্যবহার করে, আমরা HTML উপাদান (যেমন চার্ট) PDF আউটপুটে রূপান্তর করতে পারি।
- Chart to PDF Export:
doc.html()ফাংশন ব্যবহার করে চার্টের ডিভের HTML কনটেন্ট PDF ফাইল হিসেবে রেন্ডার করা হয়েছে এবংdoc.save()দিয়ে সেটি ডাউনলোড করা হয়েছে।
উপসংহার
Google Charts ব্যবহার করে আপনি খুব সহজেই PNG, SVG, এবং PDF ফরম্যাটে আপনার চার্টগুলো এক্সপোর্ট করতে পারেন। এর জন্য আপনি getImageURI() ফাংশন ব্যবহার করতে পারেন PNG বা SVG এক্সপোর্টের জন্য, এবং PDF এক্সপোর্টের জন্য বাইরের লাইব্রেরি jsPDF ব্যবহার করতে পারেন। এই পদ্ধতিগুলোর মাধ্যমে আপনি আপনার তৈরি চার্টগুলো সহজে ডাউনলোড বা শেয়ার করতে পারবেন।
Content added By
Read more
